import { useState } from 'react'
import { useSelector, useDispatch } from "react-redux";
import Taro, { useDidShow } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtForm, AtInput, AtButton } from 'taro-ui'
import { getUserInfo } from "@/utils/storage";
import './index.scss'
export default () => {
    const dispatch = useDispatch();
    const { loginFrom } = useSelector((state) => state.user);
    const { username, password } = loginFrom;
    console.log(loginFrom)
    useDidShow(() => {
        const { userId } = getUserInfo()
        if (userId) {
            dispatch(
                {
                    type: 'user/overrideStateProps',
                    payload: {
                        userId
                    }
                }
            )
            Taro.switchTab({
                url: "../message/index",
            });

        }

    })
    const handleChange = (name, val) => {
        if (!username) {
            Taro.showToast({
                title: "请输入用户名",
                icon: "none",
            });
        }
        if (!password) {
            Taro.showToast({
                title: "请输入密码",
                icon: "none",
            });
        }
        dispatch(
            {
                type: 'user/updateStateProps',
                payload: {
                    name: "loginFrom",
                    value: {
                        [name]: val
                    }
                }
            }
        )

    }
    const onSubmit = () => {
        dispatch(
            {
                type: 'user/Login',
            }
        )
    }
    const onReset = () => {
        dispatch(
            {
                type: 'user/resetLoginFrom',
            }
        )
    }
    return <>
        <AtForm
        >
            <AtInput
                name='username'
                title='用户名'
                type='text'
                placeholder='请输入用户名'
                value={username}
                onChange={(value) => handleChange('username', value)}
            />
            <AtInput
                name='password'
                title='密码'
                type='passard'
                placeholder='请输入密码'
                value={password}
                onChange={(value) => handleChange('password', value)}
            />
            <View className='fixBottom-fixed'>
                <View className='button-container'>
                    <AtButton className='button-flex' formType='reset' onClick={onReset}>重置</AtButton>
                    <AtButton className='button-flex' onClick={onSubmit} type='primary'>提交</AtButton>
                </View>
            </View>

        </AtForm>
    </>
}